<template>
  <div class="main">
    <div class="container">
      <div class="position-relative">
        <!-- 选项 -->
        <ul class="nav nav-tabs mb-3">
          <li class="nav-item">
            <a class="nav-link position-relative active" href="/letter">朋友私信<span v-if="(ifshow ? (content.map.letterUnreadCount > 0) : false)" class="badge badge-danger">{{ifshow ? content.map.letterUnreadCount : 0}}</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link position-relative" href="/notice">系统通知<span v-if="(ifshow ? (content.map.noticeUnreadCount > 0) : false)" class="badge badge-danger">{{ifshow ? content.map.noticeUnreadCount : 0}}</span></a>
          </li>
        </ul>
      </div>
      <!-- 私信列表 -->
      <ul class="list-unstyled">
        <li class="media pb-3 pt-3 mb-3 border-bottom position-relative" v-for="(item,i) in (ifshow ? content.map.conversations : [])" :key="i">
          <span v-if="item.unreadCount > 0" class="badge badge-danger">{{item.unreadCount}}</span>
          <a :href = "'/profile/' + item.target.id">
            <img :src="item.target.photo" class="mr-4 rounded-circle user-header" alt="用户头像" >
          </a>
          <div class="media-body">
            <h6 class="mt-0 mb-3">
              <span class="text-success">{{item.target.name}}</span>
              <span class="float-right text-muted font-size-12">{{item.conversation.createTime | datatime}}</span>
            </h6>
            <div>
              <a :href=" '/letterdetail/' + item.conversation.conversationId">{{item.conversation.content}}</a>
              <ul class="d-inline font-size-12 float-right">
                <li class="d-inline ml-2"><a href="#" class="text-primary">共{{item.letterCount}}条会话</a></li>
              </ul>
            </div>
          </div>
        </li>

      </ul>
      <!-- 分页 -->
      <pagination ref="pagination" v-bind:list="getletter" v-bind:itemCount="8"></pagination>
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/pagination";
export default {
  name:'letter',
  data(){
    return{
      content:null,
      ifshow:false,
    }
  },
  components: {Pagination},
  created(){
    this.setIfshow()
  },
  mounted(){
    this.getletter(1);
  },
  watch:{
    content(){
      this.setIfshow();
    }
  },
  methods:{
    //获取朋友私信列表
    getletter(page){
      // console.log(this.$refs.pagination.size)
      this.$ajax.post(process.env.VUE_APP_SERVER + '/business/web/letter/list', {
        page: page,
        size: this.$refs.pagination.size,
      }).then((response)=>{
        console.log("查询帖子列表结果：", response);
        this.content = response.data.content;
        this.$refs.pagination.render(page, response.data.content.total);
      })
    },
    //判断对象是有值
    setIfshow(){
      if(this.content != null){
        this.ifshow = true;
      }else{
        this.ifshow = false;
      }
    },
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/style/css/global.scss';
@import '@/assets/style/css/letter.scss';

/*.main .media .badge {
  position: absolute;
  top: 12px;
  left: -3px;
}*/
</style>